@extends('layouts.base')

@section('title', '会员权益')

@push('styles')
<style>
    .back-btn {
        top: 20%;
    }

    .member-status-card {
        background: rgba(255,255,255,0.15);
        border-radius: 16px;
        padding: 20px;
        margin: 20px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.2);
    }

    .member-status-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
        color: white;
    }

    .member-status-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .member-type {
        font-size: 16px;
        font-weight: 600;
        color: #ffd700;
    }

    .member-expire {
        font-size: 14px;
        opacity: 0.9;
    }

    .member-days-left {
        font-size: 12px;
        background: rgba(255,255,255,0.2);
        padding: 4px 8px;
        border-radius: 12px;
        margin-top: 5px;
        display: inline-block;
    }

    .member-header::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        animation: float 6s ease-in-out infinite;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(180deg); }
    }

    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
        40% { transform: translateY(-10px); }
        60% { transform: translateY(-5px); }
    }

    .benefits-container {
        padding: 20px;
    }

    .benefit-card {
        background: white;
        border-radius: 16px;
        padding: 20px;
        margin-bottom: 15px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .benefit-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    }

    .benefit-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .benefit-header {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }

    .benefit-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-right: 15px;
        color: white;
    }

    .benefit-title {
        font-size: 18px;
        font-weight: 600;
        color: #2d3748;
        margin: 0;
    }

    .benefit-description {
        color: #718096;
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 15px;
    }

    .benefit-features {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .benefit-features li {
        display: flex;
        align-items: center;
        padding: 8px 0;
        color: #4a5568;
        font-size: 14px;
    }

    .benefit-features li::before {
        content: '✓';
        color: #48bb78;
        font-weight: bold;
        margin-right: 10px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #f0fff4;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

    .upgrade-section {
        /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
        margin-top: 20px;
        /*border-radius: 20px;*/
        /*padding: 25px;*/
        /*text-align: center;*/
        /*color: white;*/
        /*position: relative;*/
        /*overflow: hidden;*/
    }

    /*.upgrade-section::before {*/
    /*    content: '';*/
    /*    position: absolute;*/
    /*    top: -50%;*/
    /*    right: -50%;*/
    /*    width: 200%;*/
    /*    height: 200%;*/
    /*    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);*/
    /*    animation: float 8s ease-in-out infinite reverse;*/
    /*}*/

    .upgrade-title {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 10px;
        position: relative;
        z-index: 1;
    }

    .upgrade-description {
        font-size: 14px;
        opacity: 0.9;
        margin-bottom: 20px;
        position: relative;
        z-index: 1;
    }

    .upgrade-buttons {
        display: flex;
        gap: 10px;
        justify-content: center;
        position: relative;
        z-index: 1;
    }

    .upgrade-btn {
        background: rgba(255,255,255,0.2);
        border: 1px solid rgba(255,255,255,0.3);
        color: white;
        padding: 12px 20px;
        border-radius: 25px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
        text-decoration: none;
    }

    .upgrade-btn:hover {
        background: rgba(255,255,255,0.3);
        transform: translateY(-2px);
        color: white;
        text-decoration: none;
    }

    .upgrade-btn.primary {
        background: white;
        color: #667eea;
    }

    .upgrade-btn.primary:hover {
        background: #f7fafc;
        color: #5a67d8;
    }

    .member-status {
            margin-top: 15px;
            padding: 8px 20px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            display: inline-block;
            backdrop-filter: blur(10px);
            position: relative;
            z-index: 1;
        }

        .member-status.active {
            background: rgba(72, 187, 120, 0.2);
            border: 1px solid rgba(72, 187, 120, 0.3);
        }

        .member-status.expired {
            background: rgba(245, 101, 101, 0.2);
            border: 1px solid rgba(245, 101, 101, 0.3);
        }

        .member-status-text {
            font-size: 14px;
            font-weight: 500;
        }

        /* 会员价格展示区域样式 */
        .member-pricing-container {
            margin: 20px auto 0;
            max-width: 90%;
        }

        .pricing-card {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 16px;
            padding: 15px 10px;
            text-align: center;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        .pricing-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .pricing-card.selected {
            background: rgba(255, 255, 255, 0.25);
            border: 2px solid rgba(255, 255, 255, 0.3);
            transform: scale(1.05);
            position: relative;
            z-index: 1;
        }

        .pricing-card:hover {
            transform: scale(1.05) translateY(-5px);
        }

        .pricing-icon {
            font-size: 24px;
            margin-bottom: 5px;
        }

        .pricing-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .pricing-price {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 2px;
        }

        .pricing-original {
            font-size: 12px;
            text-decoration: line-through;
            opacity: 0.7;
        }

        .pricing-badge {
            position: absolute;
            top: -10px;
            right: -10px;
            background: #ffd700;
            color: #2d3748;
            font-size: 12px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        /* 倒计时样式 */
        .countdown-container {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 16px;
            padding: 10px;
            margin-top: 15px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .countdown-text {
            font-size: 14px;
            margin-bottom: 5px;
        }

        .countdown-timer {
            font-size: 20px;
            font-weight: 700;
            font-family: monospace;
        }

        /* 会员权益对比表格样式 */
        .comparison-container {
            padding: 20px;
            margin-top: 20px;
        }

        .comparison-title {
            text-align: center;
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 20px;
            color: #2d3748;
            position: relative;
        }

        .comparison-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 3px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 3px;
        }

        .comparison-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }

        .comparison-table th,
        .comparison-table td {
            padding: 12px 15px;
            text-align: center;
            border-bottom: 1px solid #e2e8f0;
        }

        .comparison-table th {
            background: #f7fafc;
            font-weight: 600;
            color: #4a5568;
        }

        .comparison-table th:first-child {
            text-align: left;
        }

        .comparison-table td:first-child {
            text-align: left;
            font-weight: 500;
            color: #2d3748;
        }

        .comparison-table th:nth-child(3),
        .comparison-table td:nth-child(3) {
            background: rgba(102, 126, 234, 0.05);
        }

        .comparison-table tr:last-child td:first-child {
            border-bottom-left-radius: 10px;
        }

        .comparison-table tr:last-child td:last-child {
            border-bottom-right-radius: 10px;
        }

        .comparison-table tr:hover td {
            background-color: #f8fafc;
        }

        .comparison-table tr:hover td:nth-child(3) {
            background-color: rgba(102, 126, 234, 0.1);
        }

        .feature-icon {
            margin-right: 8px;
            font-size: 16px;
        }

        .check {
            color: #48bb78;
            font-weight: bold;
        }

        .check.premium {
            color: #ffd700;
            text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }

        .cross {
            color: #e53e3e;
        }

        .limited {
            color: #ed8936;
            font-size: 12px;
        }

        /* 小标题样式 */
        .feature-category {
            background: rgba(102, 126, 234, 0.1);
            font-weight: 600;
            color: #4a5568;
            text-align: left;
        }

        .feature-category td {
            padding: 10px 15px !important;
            font-size: 15px;
            border-bottom: 1px solid #e2e8f0;
        }

        /* 会员权益卡片样式 */
        .benefits-card {
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }

        /* 功能分类小标题样式 */
        .feature-category {
            background-color: #f5f7fa;
        }

        .feature-category td {
            font-weight: 600;
            color: #333;
            text-align: left;
            padding: 10px 15px;
            font-size: 14px;
            border-bottom: 1px solid #e0e0e0;
        }

        /* 产品卡片选中状态 */
        .pricing-card {
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .product-icon {
            font-size: 48px;
            margin-bottom: 10px;
        }

        .product-price .current-price {
            font-size: 24px;
            font-weight: bold;
            color: #007bff;
            margin-right: 10px;
        }

        .product-price .original-price {
            font-size: 16px;
            color: #6c757d;
            text-decoration: line-through;
        }

        .purchase-link-container {
            margin-top: 15px;
        }

        .purchase-link-container .form-label {
            font-weight: 600;
            margin-bottom: 8px;
        }

        .input-group .form-control {
            border-right: none;
        }

        .input-group .btn {
            border-left: none;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .comparison-table {
                font-size: 13px;
            }

            .comparison-table th,
            .comparison-table td {
                padding: 8px 10px;
            }

            .feature-icon {
                font-size: 14px;
            }

            .modal-dialog {
                margin: 10px;
            }

            .product-icon {
                font-size: 36px;
            }

            .product-price .current-price {
                font-size: 20px;
            }
        }
</style>
@endpush

@section('content')
<div class="page-header">
    <button class="back-btn" onclick="window.location.href = '{{ route('user.profile') }}'"><</button>
    <div class="page-icon">👑</div>
    <div class="page-title">会员权益</div>
    <div class="page-subtitle">享受专属特权，让记账更轻松</div>

    <!-- 会员价格展示区域 -->
    <div class="member-pricing-container">
        <div class="row g-3 mt-3">
            @foreach($products as $product)
            <div class="col-4">
                <div class="pricing-card"
                     onclick="selectMainProduct(this)"
                     data-product-id="{{ $product->id }}"
                     data-product-name="{{ $product->name }}"
                     data-product-price="{{ $product->price }}"
                     data-product-original-price="{{ $product->original_price }}"
                     data-product-url="{{ $product->purchase_url }}"
                     data-product-icon="{{ $product->icon }}"
                     data-product-badge="{{ $product->badge ?? '' }}">
                    <div class="pricing-icon">{{ $product->icon }}</div>
                    <div class="pricing-title">{{ $product->name }}</div>
                    <div class="pricing-price">¥{{ number_format($product->price, 2) }}</div>
                    <div class="pricing-original">¥{{ number_format($product->original_price, 2) }}</div>
                    @if($product->badge)
                    <div class="pricing-badge">{{ $product->badge }}</div>
                    @endif
{{--                    <div class="pricing-select-hint">点击选择</div>--}}
                </div>
            </div>
            @endforeach
        </div>

        <!-- 新人限时优惠倒计时 -->
{{--        <div class="countdown-container mt-3">--}}
{{--            <div class="countdown-text">新人限时优惠倒计时</div>--}}
{{--            <div class="countdown-timer" id="countdownTimer">--}}
{{--                <span id="countdown-hours">23</span>:<span id="countdown-minutes">59</span>:<span id="countdown-seconds">59</span>--}}
{{--            </div>--}}
{{--        </div>--}}
    </div>

    @if(auth()->user() && auth()->user()->membership_expires_at && auth()->user()->membership_expires_at > now())
        @php
            $expiresAt = auth()->user()->membership_expires_at;
            $daysLeft = now()->diffInDays($expiresAt, false);
            $membershipType = auth()->user()->membership_type ?? '会员';
        @endphp
        <div id="memberStatusContainer" style="display: block;">
            <div class="member-status active">
                <div class="member-status-text">会员状态: <span id="memberStatusText">有效</span></div>
                <div class="member-expiry">到期时间: <span id="memberExpiryDate">{{ $expiresAt->format('Y年m月d日 H:i:s') }}</span></div>
{{--                @if($daysLeft <= 30)--}}
{{--                <div class="member-days-left">(还剩{{ $daysLeft }}天)</div>--}}
{{--                @endif--}}
            </div>
        </div>
    @endif

    <div class="upgrade-section">
        @if(auth()->user() && auth()->user()->membership_expires_at && auth()->user()->membership_expires_at > now())
{{--            <div class="upgrade-title">会员管理</div>--}}
{{--            <div class="upgrade-description">感谢您的支持，继续享受会员特权</div>--}}
            <div class="upgrade-buttons">
                <a href="{{ route('membership.redeem.form') }}" class="upgrade-btn">兑换码续费</a>
                <a href="{{ route('membership.history') }}" class="upgrade-btn">兑换记录</a>
                <button class="upgrade-btn primary" onclick="showUpgradeModal()">续费会员</button>
            </div>
        @else
{{--            <div class="upgrade-title">立即升级会员</div>--}}
{{--            <div class="upgrade-description">解锁全部功能，享受完整记账体验</div>--}}
            <div class="upgrade-buttons">
                <a href="{{ route('membership.redeem.form') }}" class="upgrade-btn">兑换码升级</a>
                <button class="upgrade-btn primary" onclick="showUpgradeModal()">立即购买</button>
            </div>
        @endif
    </div>
</div>

<!-- 会员权益对比表格 -->
<div class="comparison-container">
    <h3 class="comparison-title">会员权益对比</h3>
    <div class="table-responsive">
        <table class="comparison-table">
            <thead>
                <tr>
                    <th>功能</th>
                    <th>普通用户</th>
                    <th>尊贵会员</th>
                </tr>
            </thead>
            <tbody>
                <!-- 基础功能小标题 -->
                <tr class="feature-category">
                    <td colspan="3">基础功能</td>
                </tr>
                <tr>
                    <td><span class="feature-icon">📝</span>基础记账</td>
                    <td><span class="check">✓</span></td>
                    <td><span class="check">✓</span></td>
                </tr>
                <tr>
                    <td><span class="feature-icon">🔄</span>多设备数据同步</td>
                    <td><span class="check">✓</span></td>
                    <td><span class="check">✓</span></td>
                </tr>
                <tr>
                    <td><span class="feature-icon">☁️</span>数据备份</td>
                    <td><span class="check">✓</span></td>
                    <td><span class="check">✓</span></td>
                </tr>

                <!-- 一句话记账功能小标题 -->
                <tr class="feature-category">
                    <td colspan="3">一句话/微信记账功能</td>
                </tr>
                <tr>
                    <td><span class="feature-icon">📝</span>文字输入识别</td>
                    <td><span class="limited">1次/天</span></td>
                    <td><span class="check">无限制</span></td>
                </tr>
                <tr>
                    <td><span class="feature-icon">🎤</span>语音识别</td>
                    <td><span class="limited">1次/天</span></td>
                    <td><span class="check">无限制</span></td>
                </tr>
                <tr>
                    <td><span class="feature-icon">📸</span>消费截图识别</td>
                    <td><span class="limited">1次/天</span></td>
                    <td><span class="check">无限制</span></td>
                </tr>

                <!-- 明细页面功能小标题 -->
                <tr class="feature-category">
                    <td colspan="3">账本明细功能</td>
                </tr>
                <tr>
                    <td><span class="feature-icon">🔍</span>搜索功能</td>
                    <td><span class="cross">✗</span></td>
                    <td><span class="check">✓</span></td>
                </tr>
                <tr>
                    <td><span class="feature-icon">📊</span>导出功能</td>
                    <td><span class="cross">✗</span></td>
                    <td><span class="check">✓</span></td>
                </tr>
                <tr>
                    <td><span class="feature-icon">🔃</span>明细排序</td>
                    <td><span class="limited">逆序</span></td>
                    <td><span class="check">正序/逆序 </span></td>
                </tr>
                <tr>
                    <td><span class="feature-icon">📈</span>消费排行</td>
                    <td><span class="limited">仅列表</span></td>
                    <td><span class="check">饼图分析</span></td>
                </tr>

                <!-- 账本列表功能小标题 -->
                <tr class="feature-category">
                    <td colspan="3">账本功能</td>
                </tr>
                <tr>
                    <td><span class="feature-icon">📚</span>账本数量</td>
                    <td><span class="limited">3个</span></td>
                    <td><span class="check">无限制</span></td>
                </tr>
                <tr>
                    <td><span class="feature-icon">👥</span>账本协作</td>
                    <td><span class="limited">2人</span></td>
                    <td><span class="check">无限制</span></td>
                </tr>
                <tr>
                    <td><span class="feature-icon">🏷️</span>收支分类</td>
                    <td><span class="limited">10个</span></td>
                    <td><span class="check">无限制</span></td>
                </tr>
                <tr>
                    <td><span class="feature-icon">⏲️</span>定时记账</td>
                    <td><span class="limited">1个</span></td>
                    <td><span class="check">无限制</span></td>
                </tr>
                <tr>
                    <td><span class="feature-icon">📊️</span>账单导出</td>
                    <td><span class="cross">✗</span></td>
                    <td><span class="check">无限制</span></td>
                </tr>

            </tbody>
        </table>
    </div>
</div>

<!-- 升级弹窗 -->
<div class="modal fade" id="upgradeModal" tabindex="-1" aria-labelledby="upgradeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content modal-test">
            <div class="modal-header">
                <h5 class="modal-title" id="upgradeModalLabel">购买会员</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="selectedProductInfo" class="mb-3">
                    <div class="text-center">
                        <div class="product-icon mb-2" id="modalProductIcon">👑</div>
                        <h6 id="modalProductName">请先选择会员套餐</h6>
                        <div class="product-price mb-2">
                            <span class="current-price" id="modalProductPrice">¥0.00</span>
                            <span class="original-price" id="modalProductOriginalPrice">¥0.00</span>
                        </div>
{{--                        <div id="modalProductBadge" class="badge bg-warning mb-3" style="display: none;"></div>--}}
                    </div>
                </div>
                <div class="purchase-info">
                    <div class="alert alert-info">
                        <h6>购买流程：</h6>
                        <ol class="mb-0">
                            <li>复制下方购买链接</li>
                            <li>前往购买页面完成支付</li>
                            <li>获得兑换码后返回本页面</li>
                            <li>使用兑换码激活会员</li>
                        </ol>
                    </div>
                    <div class="invite-link-section" id="invite-link-section" style="">
                        <div class="form-group">
                            <label class="form-label">购买链接</label>
                            <div class="input-group">
                                <input type="text" class="form-input" id="purchaseLink" readonly="" placeholder="请先选择会员套餐">
                            </div>
                        </div>
                        <button class="btn btn-primary" type="button" id="copyLinkBtn" onclick="copyPurchaseLink()" disabled>复制</button>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <a href="{{ route('membership.redeem.form') }}" class="btn btn-success">我有兑换码</a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>
<script>
    // 全局变量存储选中的产品信息
    let selectedProduct = null;

    // 选择主要产品
    function selectMainProduct(element) {
        // 移除其他卡片的选中状态
        document.querySelectorAll('.pricing-card').forEach(card => {
            card.classList.remove('selected');
        });

        // 添加选中状态
        element.classList.add('selected');

        // 获取产品信息
        selectedProduct = {
            id: element.dataset.productId,
            name: element.dataset.productName,
            price: element.dataset.productPrice,
            originalPrice: element.dataset.productOriginalPrice,
            url: element.dataset.productUrl,
            icon: element.dataset.productIcon,
            badge: element.dataset.productBadge
        };

        console.log('选中产品:', selectedProduct);
    }

    // 显示升级弹窗
    function showUpgradeModal() {
        if (!selectedProduct) {
            alert('请先选择一个会员套餐');
            return;
        }

        // 更新弹窗中的产品信息
        document.getElementById('modalProductIcon').textContent = selectedProduct.icon;
        document.getElementById('modalProductName').textContent = selectedProduct.name;
        document.getElementById('modalProductPrice').textContent = '¥' + parseFloat(selectedProduct.price).toFixed(2);
        document.getElementById('modalProductOriginalPrice').textContent = '¥' + parseFloat(selectedProduct.originalPrice).toFixed(2);
        document.getElementById('purchaseLink').value = selectedProduct.url;

        // 显示/隐藏徽章
        // const badgeElement = document.getElementById('modalProductBadge');
        // if (selectedProduct.badge && selectedProduct.badge.trim() !== '') {
        //     badgeElement.textContent = selectedProduct.badge;
        //     badgeElement.style.display = 'inline-block';
        // } else {
        //     badgeElement.style.display = 'none';
        // }

        // 启用复制按钮
        document.getElementById('copyLinkBtn').disabled = false;

        // 显示弹窗
        const modal = new bootstrap.Modal(document.getElementById('upgradeModal'));
        modal.show();
    }

    // 复制购买链接
    function copyPurchaseLink() {
        const linkInput = document.getElementById('purchaseLink');
        linkInput.select();
        linkInput.setSelectionRange(0, 99999); // 移动端兼容

        try {
            document.execCommand('copy');
            const copyBtn = document.getElementById('copyLinkBtn');
            const originalText = copyBtn.innerHTML;
            copyBtn.innerHTML = '<i class="fas fa-check"></i> 已复制';
            copyBtn.classList.remove('btn-outline-secondary');
            copyBtn.classList.add('btn-success');

            setTimeout(() => {
                copyBtn.innerHTML = originalText;
                copyBtn.classList.remove('btn-success');
                copyBtn.classList.add('btn-outline-secondary');
            }, 2000);

            // 显示提示
            alert('购买链接已复制到剪贴板！\n\n请前往购买页面完成支付，获得兑换码后返回本页面进行兑换。');
        } catch (err) {
            console.error('复制失败:', err);
            alert('复制失败，请手动复制链接');
        }
    }

    // 倒计时功能
    function startCountdown() {
        // 设置24小时倒计时
        let hours = 23;
        let minutes = 59;
        let seconds = 59;

        // 检查本地存储中是否有保存的倒计时
        const savedCountdown = localStorage.getItem('countdownEndTime');
        if (savedCountdown) {
            const endTime = new Date(parseInt(savedCountdown));
            const now = new Date();

            // 如果倒计时已过期，重新设置24小时
            if (endTime <= now) {
                setNewCountdown();
            } else {
                // 计算剩余时间
                const timeDiff = endTime - now;
                hours = Math.floor(timeDiff / (1000 * 60 * 60));
                minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
                seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
            }
        } else {
            setNewCountdown();
        }

        function setNewCountdown() {
            // 设置24小时后的结束时间
            const endTime = new Date();
            endTime.setHours(endTime.getHours() + 24);
            localStorage.setItem('countdownEndTime', endTime.getTime());
        }

        // 更新倒计时显示
        function updateCountdown() {
            const hoursElement = document.getElementById('countdown-hours');
            const minutesElement = document.getElementById('countdown-minutes');
            const secondsElement = document.getElementById('countdown-seconds');

            // 检查元素是否存在，避免错误
            if (hoursElement && minutesElement && secondsElement) {
                hoursElement.textContent = hours.toString().padStart(2, '0');
                minutesElement.textContent = minutes.toString().padStart(2, '0');
                secondsElement.textContent = seconds.toString().padStart(2, '0');
            }

            // 减少秒数
            seconds--;
            if (seconds < 0) {
                seconds = 59;
                minutes--;
                if (minutes < 0) {
                    minutes = 59;
                    hours--;
                    if (hours < 0) {
                        // 倒计时结束，重新设置24小时
                        hours = 23;
                        minutes = 59;
                        seconds = 59;
                        setNewCountdown();
                    }
                }
            }
        }

        // 立即更新一次显示
        updateCountdown();

        // 每秒更新一次倒计时
        setInterval(updateCountdown, 1000);
    }

    // 页面加载动画
    $(document).ready(function() {
        $('.benefit-card').each(function(index) {
            $(this).css({
                'opacity': '0',
                'transform': 'translateY(20px)'
            }).delay(index * 100).animate({
                'opacity': '1'
            }, 500).css('transform', 'translateY(0)');
        });

        // 启动倒计时
        startCountdown();
    });
</script>
@endpush
